import React from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import { Card } from 'antd';
import css from './index.less';

@observer
export default class Cards extends React.Component {

  static propTypes = {
    list: PropTypes.array,
    width: PropTypes.number,
  };

  static defaultProps = {
    width: 60,
    list: [],
  };

  render() {
    const { list, width } = this.props;
    return (
      <div className={css.list}>
        {
          list.map((item, index) => {
            const _props = {
              className: css.card,
              key: `card-${index}`,
              style: {
                width,
              },
              bodyStyle: {
                padding: 0
              }
            };
            return (
              <Card {..._props}>
                {item}
              </Card>
            );
          })
        }
      </div>
    );
  }
}
